<template>
    <div id="map">
        <div id="container">
            <button class="btn btn-success" @click="activate('TextArea')">测试文本标绘</button>
            <button class="btn btn-success" @click="activate('Point')">测试画点</button>
            <button class="btn btn-success" @click="activate('Polyline')">测试画线</button>
            <button class="btn btn-success" @click="activate('Curve')">测试画曲线</button>
            <button class="btn btn-success" @click="activate('Arc')">测试画弓形</button>
            <button class="btn btn-success" @click="activate('Circle')">测试画圆</button>

            <button class="btn btn-success" @click="activate('FreeHandLine')">测试画自由线</button>
            <button class="btn btn-success" @click="activate('RectAngle')">测试画矩形</button>
            <button class="btn btn-success" @click="activate('Ellipse')">测试椭圆</button>
            <button class="btn btn-success" @click="activate('Lune')">测试弓形</button>
            <button class="btn btn-success" @click="activate('Sector')">测试画扇形</button>
            <button class="btn btn-success" @click="activate('ClosedCurve')">测试画闭合曲面</button>
            <button class="btn btn-success" @click="activate('Polygon')">测试多边形</button>
            <button class="btn btn-success" @click="activate('FreePolygon')">测试自由面</button>
            <button class="btn btn-success" @click="activate('GatheringPlace')">测试集结地</button>

            <button class="btn btn-success" @click="activate('DoubleArrow')">测试双箭头</button>
            <button class="btn btn-success" @click="activate('StraightArrow')">测试细直箭头</button>
            <button class="btn btn-success" @click="activate('FineArrow')">测试粗单尖头箭头</button>
            <button class="btn btn-success" @click="activate('AttackArrow')">测试进攻方向</button>
            <button class="btn btn-success" @click="activate('AssaultDirection')">测试粗单直箭头</button>
            <button class="btn btn-success" @click="activate('TailedAttackArrow')">测试进攻方向（尾）</button>
            <button class="btn btn-success" @click="activate('SquadCombat')">测试分队战斗行动</button>
            <button class="btn btn-success" @click="activate('TailedSquadCombat')">测试分队战斗行动（尾）</button>

            <button class="btn btn-success" @click="activate('RectFlag')">测试矩形标志旗</button>
            <button class="btn btn-success" @click="activate('TriangleFlag')">测试三角标志旗</button>
            <button class="btn btn-success" @click="activate('CurveFlag')">测试曲线标志旗</button>

            <button class="btn btn-success" @click="getFeatures()">获取标绘图层上的所有要素</button>
        </div>
    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import {OSM} from 'ol/source';
    import {Tile as TileLayer} from 'ol/layer';
    import olPlot from 'ol-plot';

    export default {
        name: "MilitarySignDrawing",
        data() {
            return {
            }
        },
        mounted() {
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });

            this.plot = new olPlot(this.map,{
                zoomToExtent:true//缩放到当前视口的范围
            })

            //通过点击事件获取到当前点击是像素位置是否存在要素
            this.map.on('click', (event) => {
                const feature = this.map.forEachFeatureAtPixel(event.pixel, function (feature) {
                    return feature
                })
                //判断是军事标绘的要素数据，激活要素，要素就可以跟随鼠标移动
                if (feature && feature.get('isPlot') && !this.plot.plotDraw.isDrawing()) {
                    this.plot.plotEdit.activate(feature)
                } else {
                    this.plot.plotEdit.deactivate()
                }
            })

            //绘制结束调用绘制结束方法
            this.plot.plotDraw.on('drawEnd', this.onDrawEnd)
            //绑定文本域激活
            // this.plot.plotDraw.on('active_textArea', function (event) {
            //     debugger;
            //     const style = this.plot.plotUtils.getPlotTextStyleCode(event.overlay)
            //     console.log(style)
            // })

        },
        methods: {
            // 绘制结束后，添加到FeatureOverlay显示。
            onDrawEnd(event) {
                const feature = event.feature
                console.log(feature.getGeometry())
                // 开始编辑
                this.plot.plotEdit.activate(feature)
            },
            // 指定标绘类型，开始绘制。
            activate(type) {
                this.plot.plotEdit.deactivate()
                this.plot.plotDraw.active(type)
            },
            getFeatures() {
                const features = this.plot.plotUtils.getFeatures()
                console.log(JSON.stringify(features))
                this.plot.plotUtils.removeAllFeatures()
                this.plot.plotEdit.deactivate()
                this.plot.plotUtils.addFeatures(features)
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    #container {
        position: absolute;
        top: 10px;
        left: 350px;
        z-index: 9999;
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn:hover,
    .btn:focus,
    .btn.focus {
        color: #333;
        text-decoration: none;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }

    .btn-success {
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }
</style>